import React, { Component } from 'react';
// import { withRouter } from "react-router-dom"
import { NavBar } from 'antd-mobile';
import { StarFill, TruckOutline, SendOutline } from 'antd-mobile-icons'
import { Swiper } from 'antd-mobile'
import { good_goodinfo } from '../utils/api';
import { connect } from 'react-redux'
// import store from '../store/index'

import{request_cancel_collect,request_collect_action,request_shoppcart_add} from '../store/actionCreator'
class Detail extends Component {
    constructor(props) {
        super(props);
        this.back = this.back.bind(this);
        this.state = {
            goodinfo: {},
            goodfav:[]
        }
    }
    componentDidMount() {
        good_goodinfo({ goodid: this.props.match.params.id }).then((res) => {
            console.log(res.data.goodinfo);
            this.setState({
                goodinfo: res.data.goodinfo

            })
        })
        
    }
    
    back() {
        this.props.history.go(-1)
    }
    collect(){
        var res=this.props.collectlist.find((item)=>{
            return item.id===this.state.goodinfo.id
        })
        if(res){//找到了，说明当前商品已收藏
            // store.dispatch(request_cancel_collect(this.state.goodinfo))
            this.props.request_cancel(this.state.goodinfo)
        }else{
            //触发一个action，（触发收藏动作）
            // store.dispatch(request_collect_action(params))
            this.props.request_collect(this.state.goodinfo)
        }

    }
    
    render() {
        return (
            <div className="detail">
                <div className='goods'>
                    <div>
                        <NavBar back='返回' onBack={this.back} left=''>
                            {this.state.goodinfo && this.state.goodinfo.brand}
                        </NavBar>
                    </div>
                    <div className="toppic">
                        <Swiper autoplay loop>
                            {
                                this.state.goodinfo.pics && this.state.goodinfo.pics.map((item, index) => {
                                    return (
                                        // 轮播图组件里从响应数据拿到的每一张图片
                                        <Swiper.Item key={index}>
                                            <img src={item} alt="" />
                                        </Swiper.Item>
                                    )
                                })
                            }
                        </Swiper>
                        <div className='white'>
                            <p>活动价￥<span>{this.state.goodinfo.salesPrice && this.state.goodinfo.salesPrice.value}</span></p>
                        </div>
                    </div>

                    <p className='collect'>包邮包税</p>

                    <p className='name'>{this.state.goodinfo.name}</p>
                    <p className='brand'>{this.state.goodinfo.brand}{this.state.goodinfo.brandEN}</p>
                    <p className='describe'>{this.state.goodinfo.description}</p>
                    <div className='footer'>
                        <p onClick={()=>{this.collect()}}>
                            <StarFill className={
                                    this.props.collectlist.find((item)=>{
                                        return item.id===this.state.goodinfo.id
                                    })?"active":""} />
                            <span > 
                                {
                                    this.props.collectlist.find((item)=>{
                                        return item.id===this.state.goodinfo.id
                                    })?"已收藏":"收藏"
                                }</span></p>
                        <p><SendOutline />
                            <span> 分享</span></p>
                        <p onClick={()=>{this.props.history.push("/index/shoppcat")}}><TruckOutline/>
                            <span> 购物车</span></p>
                        <p><button className='first' onClick={()=>{ this.props.request_shoppcar_add(this.state.goodinfo)}}>加入购物车</button></p>
                        <p><button className='second' onClick={()=>{this.props.history.push('/zhifu')}}>立即购买</button></p>
                    </div>


                </div>
            </div>
        );
    }
}


export default connect(
    (state)=>{//负责将react组件和redux仓库绑定，将store中的数据注入到react组件中（注入到props）
        // 组件中用this.props.collectlist就可以获取到store中的收藏列表
        return {
            'collectlist':state.collectlist,
            'shopcarlist':state.shopcarlist
        }
    },
    (dispatch)=>{//负责将react组件和redux仓库绑定，将方法注入到react组件中（注入到props
        return {
            //触发action
            request_collect(params){
                dispatch(request_collect_action(params))
            },
            request_cancel(params){
                dispatch(request_cancel_collect(params))
            },
            request_shoppcar_add(params){
                dispatch(request_shoppcart_add(params))
            }
        }
    }
)(Detail);